import React, { PureComponent, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';

class Animation extends PureComponent {
    constructor(props) {
        super(props);
        this.state = { 
            show: true,
            list: []
        }
    }
    render() {
        return ( 
            <Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={400}
                    classNames='fade'
                    onEnter={(el) => {console.log(el, '进入')}}
                    appear={true} // <- 第一次展示的时候也有效果
                >
                    <div>你好啊</div>
                </CSSTransition>
                <button onClick={this.handleToggle}>切换</button>
                <TransitionGroup>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <CSSTransition
                                timeout={400}
                                classNames='fade'
                                onEnter={(el) => {console.log(el, '进入')}}
                                appear={true} // <- 第一次展示的时候也有效果
                                key={index}
                            >
                                <div>item</div>
                            </CSSTransition>            
                        )
                    })
                }
                </TransitionGroup>
                <button onClick={this.handleAddItem}>添加列表</button>
            </Fragment>
        );
    }

    handleToggle = () => {
        this.setState({
            show: this.state.show ? false : true
        })
    }

    handleAddItem = () => {
        this.setState((prevState) => {
            return {
                list: [...prevState.list, 'Item ']
            }
        })
    }
}
 
export default Animation;